<template>
  <div>
    <h2 :style="style" ref="hhh">测试样式Demo</h2>
    <h2 v-if="loading">Loading...</h2>
    <h2 v-else @click="showHhh">加载完毕</h2>
    <el-button @click="loading = !loading">修改loading</el-button>
    <Student>
      <!-- <template v-slot:header>
        <h2>天空没有一片云</h2>
      </template>
      <template v-slot:footer> 眼中没有泪滴 </template>
      <template v-slot:default="{ age }">
        <h2>龄：{{ age }}</h2>
      </template> -->
    </Student>
    <el-divider></el-divider>
    <!-- <Student /> -->
    <Count :count="count" :increment="increment" @hhh="demo" />
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import Student from "./components/Student";
import Count from "./components/Count";

export default {
  name: "App",
  components: {
    Student,
    Count,
  },
  data() {
    return {
      count: 0,
      style: {
        fontSize: "60px",
        background: "#bfa",
      },
      loading: false,
    };
  },
  methods: {
    increment(selectNumber) {
      this.count += selectNumber;
    },
    showHhh() {
      console.log(this.$refs.hhh.innerHTML);
      console.log(nanoid());
    },
    demo(e) {
      console.log("@@", e);
    },
  },
};
</script>

<style>
</style>